<template>
  <div id="app">
    <div :class="['music-btn', {'close': !playing}]" v-if="scene !== 2" @click="handleMusic"></div>
    <component :is="currentScene"></component>
  </div>
</template>

<script>
/* eslint-disable */
import fristScreen from './components/frist-screen'
import secondScreen from './components/second-screen'
import thirdScreen from './components/third-screen'
import fourthScreen from './components/fourth-screen'
import fiveScreen from './components/five-screen'
import sixthScreen from './components/sixth-screen'
import { mapState } from 'vuex'

import music from 'utils/music'

const scenes = [fristScreen, secondScreen, thirdScreen, fourthScreen, fiveScreen, sixthScreen]

export default {
  name: 'app',
  data() {
    return {
      playing: false
    }
  },
  components: {
    fristScreen,
    secondScreen,
    fourthScreen,
    fiveScreen,
    sixthScreen
  },
  computed: {
    ...mapState({
      scene: state => state.scene
    }),
    currentScene() {
      console.log('===', this.scene)
      return scenes[this.scene] || 0
    }
  },
  methods: {
    handleMusic () {
      if (this.playing) music.pause()
      else music.play()
    }
  },
  mounted () {
    music.addEventListener('play', () => {
      console.log('播放')
      this.playing = true
    })
    music.addEventListener('pause', () => {
      console.log('暂停')
      this.playing = false
    })
  }
}
</script>

<style>
#app {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7.5rem;
  overflow: hidden;
  background: url('./assets/bg.jpg') no-repeat;
  background-size: 100% 100%;
}
.music-btn {
  width: 0.56rem;
  height: 0.55rem;
  position: absolute;
  z-index: 4;
  top: 0.2rem;
  right: 0.2rem;
  background: url('./assets/music_btn.png') no-repeat;
  background-size: 0.56rem 1.1rem;
  animation: rotate infinite 5s linear;
}
.music-btn.close {
  background-position: center bottom;
  animation: none;
}
</style>
